@charset "UTF-8";
@import "../common/scss/mobile";
@import "../common/scss/mixins";
@import "../common/scss/sprites";
body{
	height:100%;
}
.coupon-page{
	height:100%;
	@include flexbox;
	@include flex-direction(column);
	background-color:#00c267;
}
.itembox{
        background-repeat:no-repeat;
        background-position:center center;
		background-image:url(/images/code/donationed.png);
       position:relative;

		background-size:100%;
		height: 30.78vw;
		margin:1rem 1.4rem 0;
		.flag{
		    position:absolute;
		    left:0;bottom:0;
		    border-bottom-left-radius: 0.4rem;
		    overflow: hidden;
			.triangle{
				@include triangle-bottom-left(3.6rem,3.6rem,#bfbfbf);
			}
			.text{
			    position: absolute;
			    color: #fff;
			    z-index: 100;
			    left: -0.1rem;
			    bottom: 0.8rem;
			    font-size: 0.9rem;
			    white-space: nowrap;
			    transform: rotate(45deg);
			    text-align: center;
			}
		}
	.row{
		@include flexbox;  
		@include align-items(center);
		height: 100%;
		.infobox{
			color:#999999;
			font-size:$fs11;
			padding:0 1.4rem;
            @include flex(1); 
			    overflow: hidden;
			.title{
				font-size:$fs15;
				color:#999;
			}
			.rule{
				@include ellipsisLn(2);
			    height: 3.2rem;
			}
		}
		.pricebox{
			text-align:center;
		    width: 32.36%;
			.title{
				font-size:2.5rem;
				color:#999;
				em{
				   font-size:1.6rem;
				}
				span,em{    vertical-align: baseline;}
			}
			.canuse{
				font-size: 1.1rem;
				color:#666;
			}

		}
	}
	.butn{
		text-align:center;
		border-top:1.5px dashed #d4d4d4;
		width:92%;
		margin:0 auto;
		button{
			font-size:$fs15;
			color:#00c267;
			border:0;
			background-color:transparent;
			padding:0.9rem 0;
		}
	}
		&.use{
			background-image:url(/images/code/use.png);
			.row{
				.infobox{
					.title{
						color:#333;
					}
				}
				.pricebox{
					.title{
						color:#fc7700;
					}
				}
			}
		}
		&.donationed{
			background-image:url(/images/code/donationed.png);
		}
		&.donationing{
			background-image:url(/images/code/donationed.png);
		}
		&.donationing{
			background-image:url(/images/code/donationed.png);
		}
		&.invalid{
			background-image:url(/images/code/donationed.png);
		}
		&.used{
			background-image:url(/images/code/used.jpg);
		}
}
@import "../common/scss/pages/follow";
@import "../common/scss/pages/emptydata";
@import "../common/scss/pages/header";
@import "../common/scss/pages/footer";
@import "../common/scss/pages/btns";
@import "../common/scss/pages/card";
@import "../common/scss/layer";
